
<template>
	<div class="video-container">
	<video-player
	  src="https://cdn.huazewen.top/Video/%E2%80%9C%E6%AF%8F%E6%97%A5%E4%B8%80%E9%81%8D%EF%BC%8C%E6%99%BA%E5%95%86%E5%86%8D%E8%A7%81%E2%80%9D%20%281%29.mp4"
	  poster=""
	  controls
	  :loop="false"
	  :volume="0.8"
    :options="playerOptions"
    :playbackRates="playbackRates"
    language="zh-CN"
	  @mounted="onPlayerMounted"
	  @ready="onPlayerReady"
	  @play="onPlayerPlay"
	  @pause="onPlayerPause"
	  @ended="onPlayerEnded"
	  @seeking="onPlayerSeeking"



	/>
  <!-- @durationchange="duration" -->
  <!-- @timeupdate="handleEvent($event)" -->

	</div>
  </template>
  
  <script setup>
  import { ref ,onMounted,reactive} from 'vue'
  import { VideoPlayer } from '@videojs-player/vue'
  import 'video.js/dist/video-js.css'

  const videoPlayerRef = ref('')
  const playbackRates = reactive([0.5, 1, 1.5, 2,3])
  const playerOptions = reactive({
    controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: true,
          fullscreenToggle: true // 全屏按钮
        }
})     
const handleEvent = () => {
        console.log('Basic player event', )
   }
  const onPlayerReady = () => {
	console.log('Player ready')
  }
  
  const onPlayerPlay = () => {
	console.log('Player play')
  }
  
  const onPlayerPause = () => {
    
	console.log('Player pause')
  }
  
  const onPlayerEnded = () => {
	console.log('Player ended')
  }
  
  const onPlayerSeeking = () => {
	console.log('Player seeking')
  }
  const duration = () => {
	console.log('Player duration')
  }

const onPlayerMounted = () => {
  console.log('Player mounted')
  resizeVideo()
  window.addEventListener('resize', resizeVideo)
}

const resizeVideo = () => {
  console.log('Player resizeVideo')
  const videoPlayer = videoPlayerRef.value
  if (videoPlayer) {
    const containerWidth = videoPlayer.$el.parentNode.offsetWidth
    const containerHeight = videoPlayer.$el.parentNode.offsetHeight
    videoPlayer.width(containerWidth).height(containerHeight)
  }
}

const handleContextMenu = (event) => {
  event.preventDefault()
  
}

// // 在组件挂载后执行相关逻辑
// onMounted(() => {
//   document.addEventListener('contextmenu', handleContextMenu)
// })

</script>
<style lang="scss" scoped>

  .video-container {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 56.25%; /* 按照16:9的比例设置 */
  }

  /* add css */
.vjs-control-bar{
    color:red;
    font-size:20px;
}
  
  .video-js {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important; 

    // 初始化，暂停按钮居中
    :deep(.vjs-big-play-button) {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  }



  .vjs-icon-placeholder{
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
.controls {
  margin-top: 10px;
}

button {
  margin-right: 5px;
}
  </style>